<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的待办任务</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        .processImageView {
            position: absolute;
            border: 2px solid red;
            padding: 2px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <div id="taskPopUpLayer" style="display: none;padding: 0.3125rem">
            <form class="layui-form" method="post" id="frm">
                <input type="hidden" name="taskId" id="taskId"/>
                <input type="hidden" name="leaveID" id="leaveID"/>
                <div class="layui-form-item">
                    <label class="layui-form-label">请假标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" id="title" disabled="disabled" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">请假天数</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="days" id="day" disabled="disabled" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">请假时间</label>
                        <div class="layui-input-inline">
                            <input type="text" name="leavetime" id="leavetime" disabled="disabled" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">请假原因</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入请假单内容" disabled="disabled" name="content" id="content"
                                  class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">批注</label>
                    <div class="layui-input-block">
                        <textarea placeholder="请输入批注内容" name="comment" id="comment" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item" style="text-align: center;" id="btnDiv">
                </div>
            </form>

            <table class="layui-hide" id="commentList" lay-filter="commentListFilter"></table>
        </div>

        <div id="viewProcessImage" style="display: none;padding: 0.3125rem">
            <img alt="流程图" id="processImage"/>
            <div class="processImageView"></div>
        </div>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-xs layui-btn-primary data-count-edit" lay-event="toDoTask">办理任务</a>
            <a class="layui-btn layui-btn-xs layui-btn-normal data-count-delete"
               lay-event="viewProcessByTaskId">查看流程图</a>
        </script>
    </div>
</div>
<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../../lib/common/common.js" charset="utf-8"></script>
<script>

    let tableIns;
    let index;
    layui.use(['form', 'table', 'layer'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            layer = layui.layer;

        tableIns = table.render({
            elem: '#currentTableId',
            url: api + "workFlow/loadCurrentUserTask",
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", fixed: "left"},
                {field: 'id', title: '任务ID', align: "center"},
                {field: 'name', title: '待办任务名称', align: "center"},
                {field: 'createTime', title: '创建时间', align: "center"},
                {field: 'assignee', title: '办理人', align: 'center'},
                {title: '操作', toolbar: '#currentTableBar', fixed: "right", align: "center"}
            ]],
            page: true
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'toDoTask') {
                openDoTask(data);
            } else if (obj.event === "viewProcessByTaskId") {
                //传入流程对象
                viewProcessImage(data);
            }
        });

        //查看流程图
        function viewProcessImage(data) {
            var index = layui.layer.open({
                title: "审批流程进度图",
                type: 1,
                area: ["500px", "600px"],
                content: $("#viewProcessImage"),
                success: function (layero, index) {
                    $.get(api + "workFlow/ViewProcessByTaskId?taskId=" + data.id, res => {
                        $("#processImage").attr('src', api + 'workFlow/viewProcessImage?deploymentId=' + res);
                    });

                    $.get(api + "workFlow/queryTaskCoordinateByTaskId?taskId=" + data.id, res => {
                        $(".processImageView").css(
                            {
                                "height": res.height + "px",
                                "width": res.width + "px",
                                "left": res.x + "px",
                                "top": res.y + "px",
                            }
                        );
                    });

                    setTimeout(function () {
                        layui.layer.tips('点击此处返回待办任务列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500)
                }
            });
        }

        //修改待办任务
        function openDoTask(data) {
            index = layui.layer.open({
                title: "修改待办任务",
                type: 1,
                area: ["800px", "600px"],
                content: $("#taskPopUpLayer"),
                success: function (layero, index) {
                    $('#title').val('');
                    $('#day').val('');
                    $('#leavetime').val('');
                    $('#content').val('');
                    $('#taskId').val('');
                    $('#leaveID').val('');

                    $("#btnDiv").empty();

                    // 打开弹出层完毕,根据任务ID查询请假单的信息
                    $.get(api + "workFlow/queryLeaveBillByTaskId?taskId=" + data.id, res => {

                        //装载数据表格
                        $('#title').val(res.title);
                        $('#day').val(res.days);
                        $('#leavetime').val(res.leavetime);
                        $('#content').val(res.content);
                        $('#taskId').val(data.id);// 任务ID
                        $('#leaveID').val(res.id);
                    });

                    // 打开弹出层完毕,根据任务ID查询连线信息
                    $.get(api + "workFlow/queryOutComeByTaskId?taskId=" + data.id, res => {
                        $.each(res, function (index, res) {
                            let inputBtn = $(`<input type="button" value="${res}" class="layui-btn dotask"/>`);
                            $("#btnDiv").append(inputBtn);
                        });
                    });

                    setTimeout(function () {
                        layui.layer.tips('点击此处返回待办任务列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    }, 500);

                    table.render({
                        elem: '#commentList',
                        url: api + 'workFlow/loadAllCommentByTaskId?taskId=' + data.id,
                        cellMinWidth: true,
                        cols: [[
                            {field: 'time', title: '批注时间', align: "center"},
                            {field: 'userId', title: '批注人', align: "center"},
                            {field: 'message', title: '批注内容', align: "center"}
                        ]]
                    });

                }
            });
        }

        //监控按钮事件
        $("body").on("click", ".dotask", function (obj) {
            // 获取点击按钮的名称
            let outcome = this.value;

            $.post(api + "workFlow/doTask", {
                taskId: $("#taskId").val(),// 任务ID
                outcome: outcome,
                id: $("#leaveID").val(),// 请假单ID
                comment: $("#comment").val()
            }, data => {
                layer.msg(data.msg);
                //关闭弹出层
                layer.close(index);
                //刷新table
                tableIns.reload();
            })
        });
    });
</script>

</body>
</html>
